<html>
    <head>
        <meta charset="utf-8">
        <script src="../dist/claygl.js"></script>
        <script type="text/javascript" src="lib/stats.js"></script>
        <script type="text/javascript" src="lib/dat.gui.js"></script>
    </head>
    <body style="margin:0px;">
        <canvas id="main"></canvas>
        <script>
            var renderer = new clay.Renderer({
                canvas: document.getElementById('main'),
                devicePixelRatio: 1.0
            });
            renderer.resize(window.innerWidth, window.innerHeight);
            var deferredRenderer = new clay.deferred.Renderer();

            var camera = new clay.camera.Perspective({
                far: 10000,
                aspect: renderer.getViewportAspect()
            });

            var scene = new clay.Scene();

            var loader = new clay.loader.GLTF();
            loader.load('assets/models/suzanne/suzanne_high.gltf');
            var suzanneGeometry;
            var material = new clay.StandardMaterial({
                metalness: 0.5,
                uvRepeat: [3, 3],
                roughness: 0.5,
                linear: true
            });
            loader.on('success', function(res) {
                suzanneGeometry = res.scene.getNode('Suzanne').geometry;

                var mesh = new clay.Mesh({
                    geometry: suzanneGeometry,
                    material: material
                });
                mesh.geometry.generateTangents();

                [ ['diffuseMap', 'basecolor'], ['normalMap', 'normal'], ['metalnessMap', 'metalness'], ['roughnessMap', 'roughness'] ].forEach(function (mapInfo) {
                    var tex = new clay.Texture2D({
                        wrapS: clay.Texture.REPEAT,
                        wratT: clay.Texture.REPEAT
                    });
                    tex.load('assets/textures/iron-rusted4/iron-rusted4-' + mapInfo[1] + '.png')
                        .success(function () {
                            // FIXME
                            tex.wrapS = clay.Texture.REPEAT;
                            tex.wrapT = clay.Texture.REPEAT;
                        });
                    material[mapInfo[0]] = tex;
                });

                mesh.scale.set(1.4, 1.4, 1.4);
                scene.add(mesh);
            });


            var lights = [];
            var sphereGeo = new clay.geometry.Sphere();
            for (var i = 0; i < 100; i ++) {
                var rotNode = new clay.Node();
                var pointLight = new clay.light.Point({
                    color: [Math.random(), Math.random(), Math.random()],
                    range: 4 + Math.random() * 3
                });
                pointLight.position.set(0, 0, 4);
                rotNode.add(pointLight);

                rotNode.rotation
                    .rotateZ(Math.random() * 6.28)
                    .rotateY(Math.random() * 6.28);

                lights.push(rotNode);
                scene.add(rotNode);

                var debugMesh = new clay.Mesh({
                    material: new clay.StandardMaterial({
                        color: [0, 0, 0],
                        rougness: 1,
                        emission: pointLight.color
                    }),
                    geometry: sphereGeo
                });
                debugMesh.scale.set(0.1, 0.1, 0.1);
                pointLight.add(debugMesh);
            }
            camera.position.set(0, 0, 6);
            camera.lookAt(scene.position);

            var control = new clay.plugin.OrbitControl({
                domElement: renderer.canvas,
                target: camera
            });

            var timeline =  new clay.Timeline();

            timeline.on('frame', function (deltaTime) {
                lights.forEach(function (light) {
                    light.rotation.rotateX(0.01);
                });
                material.metalness = config.metalness;
                material.roughness = config.roughness;

                control.update(deltaTime);
                deferredRenderer.render(renderer, scene, camera);

                stats.update();
            });
            timeline.start();

            var stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            stats.domElement.style.left = '0px';
            document.body.appendChild(stats.domElement);


            var config = {
                roughness: 0.5,
                metalness: 0.5
            }
            var gui = new dat.GUI();

            gui.add(config, 'roughness', 0, 1);
            gui.add(config, 'metalness', 0, 1);
        </script>
    </body>
</html>